<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>同咨科技-商户后台</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <link href="../../lib/layui/css/layui.css" rel="stylesheet">

    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="module" src="../components/use-body.js"></script>



    <link href="../../static/css/task.css" rel="stylesheet">
    <link href="../../static/css/uselay.css" rel="stylesheet">
</head>

<body>
    <use-body>
        <div class="page-body taskIndex">

            <!-- 左边菜单 -->
            <div class="side">
                <span class="layui-breadcrumb breadcrumb" lay-separator="/">
                    <a><i title="首页" class="iconfont use-more"></i></a>
                    <a><cite>任务大厅</cite></a>
                </span>

                <div class="layui-panel">
                    <ul class="layui-menu" id="demo-menu">
                        <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
                            <div class="layui-menu-body-title">我的任务</div>
                            <ul>
                                <li class="layui-menu-item-checked">
                                    <div class="layui-menu-body-title">全部任务</div>
                                </li>
                            </ul>
                        </li>
                        <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
                            <div class="layui-menu-body-title">公司任务</div>
                            <ul>
                                <li>
                                    <div class="layui-menu-body-title">全部任务</div>
                                </li>
                            </ul>
                        </li>
                        <li class="layui-menu-item-divider"></li>
                        <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
                            <div class="layui-menu-body-title">项目任务</div>
                            <ul>
                                <li>
                                    <div class="layui-menu-body-title">项目小组A</div>
                                </li>
                                <li>
                                    <div class="layui-menu-body-title">项目小组B</div>
                                </li>
                                <li>
                                    <div class="layui-menu-body-title">项目小组C</div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 主体 -->
            <div class="page-border">

                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">全部任务</li>
                        <li>我创建的</li>
                        <li>我督办的</li>
                        <li>我执行的</li>

                    </ul>
                    <!-- tab上的按钮 -->
                    <div class="public-btn">
                        <button class="layui-btn layui-btn-radius">查看任务评分</button>
                        <button class="layui-btn layui-btn-radius" lay-on="add-dialog"><i
                                class="layui-icon layui-icon-addition"></i>创建任务</button>
                    </div>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">

                            <!-- 工具栏 -->
                            <form class="layui-form layui-row">
                                <div class="table-toolbar">
                                    <div class="left">
                                        <div class="layui-input-wrap">
                                            <div class="layui-input-prefix">
                                                <i class="iconfont  use-search"></i>
                                            </div>
                                            <input style="" type="text" name="A" value="" placeholder="Search..."
                                                class="layui-input" lay-affix="clear">
                                        </div>
                                        <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit
                                            lay-filter="demo-table-search">
                                            <i class="iconfont  use-search"></i>搜索
                                        </button>

                                    </div>
                                    <div class="right">
                                        <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit
                                            lay-filter="demo-table-search">
                                            <i class="iconfont use-screen"></i> 筛选
                                        </button>
                                        <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit
                                            lay-filter="demo-table-search">
                                            <i class="iconfont use-sort"></i> 排序
                                        </button>
                                        <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit
                                            lay-filter="demo-table-search">
                                            <i class="iconfont use-see"></i> 看板
                                        </button>
                                        <div class="count">
                                            15 条工作任务
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="divider"></div>
                            <!--  表格 -->
                            <table class="layui-hide" id="ID-table-demo-data"></table>

                        </div>
                        <div class="layui-tab-item">内容-2</div>
                    </div>
                </div>
            </div>
        </div>

        <div id="ID-test-layer-wrapper" style="display: none;">
            <div class="add-dialog dialog">
                <form class="layui-form" action="">
                    <div class="layui-row">
                        <div class="layui-col-xs6 line">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="username" lay-verify="required" placeholder="输入任务标题"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required"
                                    style="width: 100%;text-align: left;">任务描述</label>
                                <div class="layui-input-block" style="width: 100%; margin-left: 0;">
                                    <textarea style="height: 140px;" placeholder="输入任务描述" lay-verify="required"
                                        class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="upload">
                                    <div>
                                        <span>附件</span>
                                        <button type="button" id="ID-upload-demo-files"
                                            class="layui-btn layui-btn-primary layui-btn-radius">
                                            <i class="layui-icon layui-icon-addition"></i>
                                            添加附件
                                        </button>
                                    </div>
                                    <div>支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过20MB</div>
                                </div>

                                <div class="layui-upload-list">
                                    <table class="layui-table">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <img src="../../static/images/files.png" alt="">
                                                    <span>资料名称.docx</span>
                                                </td>
                                                <td>2020-08-19 15:43:23</td>
                                                <td>
                                                    <img src="../../static/images/a.png" alt="">
                                                    <span>路人甲</span>
                                                </td>
                                                <td>
                                                    <img src="../../static/images/co.png" alt="">
                                                </td>
                                                <td>
                                                    <img src="../../static/images/de.png" alt="">
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">任务所属版块</label>
                                <div class="layui-input-block">
                                    <select lay-verify="required">
                                        <option value="">请选择</option>
                                        <option value="AAA">选项 A</option>
                                        <option value="BBB">选项 B</option>
                                        <option value="CCC">选项 C</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">任务发起人</label>
                                <div class="layui-input-block">
                                    <select lay-verify="required">
                                        <option value="">请选择</option>
                                        <option value="AAA">选项 A</option>
                                        <option value="BBB">选项 B</option>
                                        <option value="CCC">选项 C</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">任务督办人</label>
                                <div class="layui-input-block">
                                    <select lay-verify="required">
                                        <option value="">请选择</option>
                                        <option value="AAA">选项 A</option>
                                        <option value="BBB">选项 B</option>
                                        <option value="CCC">选项 C</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">任务成员</label>
                                <div class="layui-input-block">
                                    <select lay-verify="required" multiple>
                                        <option value="">请选择</option>
                                        <option value="AAA">选项 A</option>
                                        <option value="BBB">选项 B</option>
                                        <option value="CCC">选项 C</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">

                                <label class="layui-form-label">起止时间</label>
                                <div class="layui-input-block">
                                    <div class="layui-inline">
                                        <input type="text" class="layui-input laydate" placeholder="输入开始时间">
                                    </div>
                                    <div class="layui-inline">
                                        <input type="text" class="layui-input laydate" placeholder="输入截止时间">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">任务优先级</label>
                                <div class="layui-input-block">
                                    <select lay-verify="required">
                                        <option value="">请选择</option>
                                        <option value="AAA">选项 A</option>
                                        <option value="BBB">选项 B</option>
                                        <option value="CCC">选项 C</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">评分周期</label>
                                <div class="layui-input-block">
                                    <div class="layui-inline" style="width: 140px;">
                                        <select lay-verify="required">
                                            <option value="">请选择</option>
                                            <option value="AAA">选项 A</option>
                                            <option value="BBB">选项 B</option>
                                            <option value="CCC">选项 C</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline" style="margin-right: 0;">
                                        <label class="layui-form-label" style="width: 90px;">评分时间</label>
                                        <div class="layui-inline" style="width: 140px; margin-right: 0;">
                                            <select lay-verify="required">
                                                <option value="">请选择</option>
                                                <option value="AAA">选项 A</option>
                                                <option value="BBB">选项 B</option>
                                                <option value="CCC">选项 C</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </form>

                <div class="dialog-footer">
                    <!-- 额外的按钮 -->
                    <div class="add">
                        <button type="button" class="layui-btn layui-btn-primary">完成并创建下一条</button>
                    </div>
                    <!-- 主体 -->
                    <div class="cent">
                        <button type="button" class="layui-btn btn-text">取消</button>
                        <button type="button" class="layui-btn layui-btn-radius">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </use-body>
</body>
<script>
    layui.use('table', function () {
        var $ = layui.$;
        var table = layui.table;
        var util = layui.util;
        var form = layui.form;
        var upload = layui.upload;
        var laydate = layui.laydate;
        // 已知数据渲染
        var inst = table.render({
            elem: '#ID-table-demo-data',
            cols: [[ //标题栏
                { field: 'id', title: '任务编号', align: 'center' },
                { field: 'username', title: '任务标题', align: 'center' },
                {
                    field: 'id', title: '状态', align: 'center',
                    templet: '<div><i class="table-state process"/>进行中</div>'
                },
                { field: 'username', title: '优先等级', align: 'center', templet: '<div><div class="table-tag red">最高</div></div>' },
                {
                    field: 'username', title: '任务发起人', align: 'center', templet: `<div>
        <img class="table-avatar" src='../../static/images/Rectangle 43.png'/>
        <span style="margin-left: 7px;">路人甲</span>
        </div>`},
                { field: 'username', title: '任务来源', align: 'center' },
                { field: 'username', title: '开始时间', align: 'center' },
                { field: 'username', title: '截止时间', align: 'center' },
                { field: 'username', title: '父/子任务量', align: 'center' },
                { field: 'username', title: '我的角色', align: 'center' }
            ]],
            data: [{ // 赋值已知数据
                "id": "10001",
                "username": "张三1",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "116"
            }, {
                "id": "10002",
                "username": "张三2",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "12",
                "LAY_CHECKED": true
            }, {
                "id": "10003",
                "username": "张三3",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "65"
            }, {
                "id": "10004",
                "username": "张三4",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "777"
            }, {
                "id": "10005",
                "username": "张三5",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "86"
            }, {
                "id": "10006",
                "username": "张三6",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "12"
            }, {
                "id": "10007",
                "username": "张三7",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "16"
            }, {
                "id": "10008",
                "username": "张三8",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "106"
            }],
            skin: 'nob', // 表格风格
            //even: true,
            maxHeight: 'full-260',
            page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'prev', 'page', 'next', 'limit',], //自定义分页布局
            },
            
            limit: 10 // 每页默认显示的数量
        });

        util.on('lay-on', {
            'add-dialog': function () {
                layer.open({
                    type: 1,
                    shade: false, // 不显示遮罩
                    content: $('#ID-test-layer-wrapper'), // 捕获的元素
                    title: '新建任务',
                    closeBtn: 1,
                    end: function () {
                        // layer.msg('关闭后的回调', {icon:6});
                    }
                });
            },
        })

        upload.render({
            elem: '#ID-upload-demo-files', // 绑定多个元素
            url: '', // 此处配置你自己的上传接口即可
            accept: 'file', // 普通文件
            done: function (res) {
                layer.msg('上传成功');
                console.log(res);
            }
        });

        laydate.render({
            elem: '.laydate'
        });
    });
</script>

</html>